<template>
  <div class="topic">
    <h2>专题</h2>

    <!-- v-model="loading"是否处于加载状态 -->

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- load 滚动条与底部距离小于 offset 时触发 -->
        <div
          v-for="item in list"
          :key="item.id"
          class="topic-c"
          @click="handleClick(item.id)"
        >
          <img :src="item.scene_pic_url" alt="" />
          <div>
            <p>{{ item.title }}</p>
            <p>{{ item.subtitle }}</p>
            <p>{{ item.price_info }}元起</p>
          </div>
        </div>
  
    </van-list>
  </div>
</template>

<script>
import { listaction } from "@/api/topic";
export default {
  name: "index",
  data() {
    return {
      list: [],
      loading: false,
      // 是否已加载完成
      finished: false,
      start: 1,
    };
  },
  created() {
    
  },
  methods: {
    //进入页面会执行
    onLoad() {
      //请求数据
      listaction({
        page: this.start,
      }).then((res) => {
        // console.log(res);
        // this.list = res.data;
        //将剩余几页的数据push到list中
        this.list.push(...res.data);
        // 数据请求完毕,手动把loading变为false
        this.loading = false;
        // 变更页数
        this.start++;
        // 请求最后一页数据时,将finish改为true
        if (res.page == res.total) {
          this.finished = true;
        }
      });
    },
    handleClick(id) {
      this.$router.push({
        path: "/topic/detail",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./scss/index.scss";
.topic {
  text-align: center;
  padding-bottom: 100px;
  .topic-c {
    img {
      width: 710px;
      height: 343px;
      margin: 0 auto;
    }
  }
}
</style>